<template>
	<div class="app-container">
		<el-button type="primary" style="margin-bottom: 16px" @click="dialogVisible = true">发布任务</el-button>
		<el-button type="primary" style="margin-bottom: 16px" @click="refreshList">刷新</el-button>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="id" label="任务ID" align="center" />
			<el-table-column prop="taskTitle" label="任务标题" align="center" />
			<el-table-column prop="endTime" label="结束时间" align="center" />
			<el-table-column prop="visitors" label="浏览人数" align="center" />
			<el-table-column prop="participants" label="参与人数" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="审核通知" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.satisFaction == 1" style="color: red">新作品</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<!-- <el-link type="primary" @click="handleDetail(scope.row)">详情</el-link> -->
					<el-link type="primary" style="margin: 0 8px" @click="handleEdit(scope.row)">修改</el-link>
					<el-link type="primary" style="margin: 0 8px" @click="handleAudit(scope.row)">审核</el-link>
					<el-link type="primary" style="margin: 0 8px" @click="handleDelete(scope.row)">删除</el-link>
					<el-link type="primary" style="margin: 0 8px" @click="handleHide(scope.row)">{{ scope.row.type == 0
						? '显示' : '隐藏' }}</el-link>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<el-dialog :visible.sync="dialogVisible" title="发布任务" width="700px" @close="resetForm">
			<el-form :model="form" label-width="100px">
				<el-form-item label="任务标题">
					<el-input v-model="form.taskTitle" placeholder="请输入任务标题" />
				</el-form-item>
				<el-form-item label="任务要求">
					<Editor v-model="form.content" :minHeight="200" />
				</el-form-item>
				<el-form-item label="任务奖金">
					<el-input v-model="form.reward" placeholder="请输入任务奖金" style="width: 200px" />
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker default-time="23:59:59" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.endTime"
						type="datetime" placeholder="请选择结束时间" style="width: 300px" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSave">保存</el-button>
					<el-button @click="dialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="auditDialogVisible" title="提交审核" width="800px" @close="resetAuditDialog">
			<el-button style="margin-bottom: 16px" @click="handleViewRequirement">查看任务要求</el-button>
			<el-table :data="auditList" border style="width: 100%">
				<el-table-column prop="userName" label="用户名称" align="center" />
				<el-table-column prop="createTime" label="提交时间" align="center" />
				<el-table-column label="作品" align="center">
					<template slot-scope="scope">
						<el-button type="primary" @click="handleViewWork(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.state == 1">已通过</span>
						<span v-if="scope.row.state == 2">已拒绝</span>
						<span v-if="scope.row.state == 0">
							<el-link type="primary" @click="handleAuditPass(scope.row)">通过</el-link>
							<span style="color: #ccc; margin: 0 4px">|</span>
							<el-link type="primary" @click="handleAuditReject(scope.row)">不通过</el-link>
						</span>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog :visible.sync="reasonDialogVisible" title="原因" width="400px" @close="resetReasonDialog">
			<el-input type="textarea" v-model="reasonText" :rows="5" placeholder="请输入不通过的原因"
				style="margin-bottom: 24px; text-align: center" />
			<div style="text-align: center; margin-top: 10px">
				<el-button type="primary" @click="submitReason">提交</el-button>
				<el-button @click="reasonDialogVisible = false">取消</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="workDialogVisible" title="作品预览" width="600px" @close="resetWorkDialog">
			<div style="text-align: center; max-height: 80vh; overflow-y: auto">
				<div v-for="(item, index) in workPreview" :key="index">
					<div v-if="item.type === 'image'" style="margin-bottom: 10px">
						<el-image :src="item.url" :preview-src-list="imagePreviewList"
							style="width: 300px;cursor: pointer" fit="scale-down" />
					</div>
					<div v-else-if="item.type === 'video'" style="margin-bottom: 10px">
						<video :src="item.url" controls style="width: 300px;" />
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Editor from '@/components/Editor/index.vue';
import { listManagement, addManagement, updateManagement, getManagementDetail, getExamineData, auditPass, delManagement, hideManagement } from '@/api/system/management';

export default {
	name: 'Job',
	components: { Editor },
	data() {
		return {
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			tableData: [],
			dialogVisible: false,
			form: {
				id: '',
				taskTitle: '',
				content: '',
				reward: '',
				endTime: ''
			},
			auditDialogVisible: false,
			auditList: [],
			reasonDialogVisible: false,
			reasonText: '这里就是不通过的原因',
			workDialogVisible: false,
			workPreview: [],
			imagePreviewList: [],
			isEdit: false,
			isDetail: false
		};
	},
	created() {
		this.getList();
	},
	methods: {
		refreshList() {
			this.getList();
		},
		async getList() {
			try {
				const res = await listManagement(this.queryParams);
				// 假设后端返回 { rows: [...] }
				this.tableData = res.rows || [];
				this.total = res.total;
			} catch (e) {
				this.$message.error('获取任务列表失败');
			}
		},
		async handleDetail(row) {
			this.isDetail = true;
			this.isEdit = false;
			try {
				const res = await getManagementDetail(row.id);
				this.form = res.data || {};
				this.dialogVisible = true;
			} catch (e) {
				this.$message.error('获取详情失败');
			}
		},
		async handleEdit(row) {
			this.isEdit = true;
			this.isDetail = false;
			try {
				const res = await getManagementDetail(row.id);
				this.form = res.data || {};
				this.dialogVisible = true;
			} catch (e) {
				this.$message.error('获取详情失败');
			}
		},
		async handleAudit(row) {
			try {
				const res = await getExamineData(row.id);
				this.auditList = res.rows || [];
				this.auditDialogVisible = true;
			} catch (e) {
				console.error(e);
				this.$message.error('获取审核数据失败');
			}
		},
		async handleSave() {
			console.log(this.form);
			if (!this.form.taskTitle || !this.form.content || !this.form.reward || !this.form.endTime) {
				this.$message.warning('请填写完整信息');
				return;
			}
			try {
				if (this.isEdit) {
					await updateManagement(this.form);
					this.$message.success('修改成功');
				} else {
					await addManagement(this.form);
					this.$message.success('新增成功');
				}
				this.dialogVisible = false;
				this.resetForm();
				this.getList();
			} catch (e) {
				console.log(e);
				this.$message.error('操作失败');
			}
		},
		resetForm() {
			this.form = {
				id: '',
				taskTitle: '',
				content: '',
				reward: '',
				endTime: ''
			};
			this.isEdit = false;
		},
		resetAuditDialog() {
			this.auditDialogVisible = false;
		},
		handleViewWork(row) {
			let images = row.taskImages;
			if (images.length > 0) {
				let workPreview = [];
				let imageUrls = [];
				images.forEach(item => {
					if (item.url.includes('.mp4')) {
						workPreview.push({
							type: 'video',
							url: item.url
						});
					} else {
						workPreview.push({
							type: 'image',
							url: item.url
						});
						// 收集所有图片URL用于预览
						imageUrls.push(item.url);
					}
				});
				this.workPreview = workPreview;
				this.imagePreviewList = imageUrls;
			} else {
				this.$message.error('暂无作品');
				return;
			}
			this.workDialogVisible = true;
		},
		resetWorkDialog() {
			this.workDialogVisible = false;
			this.workPreview = [];
			this.imagePreviewList = [];
		},
		handleAuditPass(row) {
			auditPass({
				id: row.id,
				state: 1,
				remark: '审核通过'
			}).then(res => {
				this.auditDialogVisible = false;
				this.getList();
			});
		},
		handleAuditReject(row) {
			this.auditObj = row;
			this.reasonDialogVisible = true;
			this.reasonText = '';
		},
		handleViewRequirement() {
			this.$message.info('这里可以弹出任务要求详情弹窗');
		},
		resetReasonDialog() {
			this.reasonDialogVisible = false;
		},
		submitReason() {
			if (!this.reasonText) {
				this.$message.warning('请输入不通过的原因');
				return;
			}
			auditPass({
				id: this.auditObj.id,
				state: 2,
				remarks: this.reasonText
			}).then(res => {
				this.reasonDialogVisible = false;
				this.auditDialogVisible = false;
				this.getList();
			});
		},
		handleDelete(row) {
			this.$confirm('确定要删除任务吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delManagement(row.id).then(res => {
					this.$message.success('删除成功');
					this.getList();
				});
			});
		},
		handleHide(row) {
			let text = row.type == 0 ? '确定要显示任务吗？' : '确定要隐藏任务吗？';
			this.$confirm(text, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				hideManagement({
					id: row.id,
					type: row.type == 0 ? 1 : 0
				}).then(res => {
					this.$message.success('隐藏成功');
					this.getList();
				});
			})
		}
	}
};
</script>

<style scoped>
.app-container {
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e4e7ed;
}
</style>
